<template>
  <div class="box">
    <Loading v-if="!bannerList.length" />
    <div v-else>
      <van-nav-bar title="精选视频" fixed @click-left="onClickLeft" left-arrow></van-nav-bar>
      <div>
        <div class="live_banner">
          <van-swipe class="my-swipe" :loop="bannerLoop" :autoplay="bannerAutoplay" indicator-color="white">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index" class="live_banner_list">
              <img :src="item.banner_pic" alt="" class="live_banner_pic">
              <img src="@/assets/images/play.png" alt="" class="live_banner_playBtn" @click="loodVideoDetail(index)">
            </van-swipe-item>
          </van-swipe>
        </div>
        <van-overlay :show="bannerShow" @click="show = false" z-index="1000" class="mark">
          <span class="close_btn" @click="closeBannerMark">
            <img src="@/assets/images/close.png" alt="">
          </span>
          <div class="banner_mark" v-if="bannerIndex !== ''">
            <iframe class="banner_mark_video" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" :src="bannerList[bannerIndex].banner_video" frameborder=0 />
          </div>
          <div class="banner_mark" v-else></div>
          <div></div>
        </van-overlay>
        <liveKind />
      </div>
    </div>
  </div>
</template>

<script>
import Loading from '../../components/loading'
import { getVideoBannerList } from '../../api'
import liveKind from './liveKind.vue'
import Vue from 'vue'
import { NavBar, SwipeItem, Swipe, Overlay } from 'vant'
Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Overlay)
export default {
  data () {
    return {
      bannerShow: false,
      bannerLoop: true,
      bannerAutoplay: 3000,
      bannerList: [],
      bannerIndex: ''
    }
  },
  components: {
    liveKind,
    Loading
  },
  mounted () {
    getVideoBannerList().then(res => {
      this.bannerList = res.data.data
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    loodVideoDetail (index) {
      this.bannerShow = true
      this.bannerLoop = false
      this.bannerAutoplay = 0
      this.bannerIndex = index
    },
    closeBannerMark () {
      this.bannerShow = false
      this.bannerLoop = true
      this.bannerAutoplay = 3000
      this.bannerIndex = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.live_banner {
  width: 100%;
  height: 1.7rem;
  margin-top: 0.53rem;
  padding: 0 0.15rem;
  .live_banner_list {
    position: relative;
    .live_banner_pic {
      width: 100%;
      height: 1.7rem;
    }
    .live_banner_playBtn {
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      z-index: 500;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
    }
  }
}
.mark {
  .close_btn {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    img {
      width: 0.32rem;
      height: 0.32rem;
    }
  }
  .banner_mark {
    width: 100%;
    height: 2.1rem;
    background: white;
    margin-top: 2rem;
    .banner_mark_video {
      width: 100%;
      height: 2.1rem;
    }
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #171717;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #171717;
  font-weight: bold;
}
/deep/ .van-nav-bar {
  z-index: 1000;
}
</style>
